<template>
	<view class="">
		<view class="main-wrap" :class="{ show: loaded }">
			<view class="back-top" :style="{ background }">
				<view class="" :style="{ height: height + 'px' }"></view>
				<view class="back-icon-con row ">
					<view class="one-icon" @tap="back"><u-icon name="nav-back" color="#fff" size="44"></u-icon></view>
					<view class="back-top-title">团长中心</view>
				</view>
			</view>
			<view class="l-top" style="position: relative;" :style="{ height: top + 'px' }">
				<image src="/static/img/bg66.png" mode="" class="top-img" :style="{ height: top + 'px' }"></image>
				<view class="l-top-i">
					<view class="l-top-t">佣金金额</view>
					<view class="l-top-m">{{commission}}</view>
					<view class="l-top-t" hover-class="hover-opacity" @tap="navTo(`/pages/leader/withdrawal?money=${commission}`)">立即提现 〉</view>
					<view class="btn" hover-class="hover-opacity" @tap="navTo('/pages/leader/commission')">明细</view>
				</view>
			</view>
			<view class="" :style="{ top: height + 44 + 'px' }" :class="{ sticky: fixed }">
				<u-tabs
					:list="list"
					height="50"
					name="name"
					:active-item-style="activeStyle"
					font-size="26"
					active-color="#2781A7"
					inactive-color="#666666"
					:is-scroll="false"
					:current="current"
					@change="change"
				></u-tabs>
			</view>
			<view class="" v-if="fixed" style="height:50px;"></view>
			<view class="" style="padding-bottom: 130upx;">
				<view class="order-con" v-for="(item, index) in dataList" :key="index">
					<view class="order-top b-b row between">
						<view class="row">
							<view class="cart-item-img"><image src="/static/img/zuanyeqingxi.png" mode="aspectFill" class="img"></image></view>
							<view class="s-con">专业清洗</view>
						</view>
						<u-icon name="/static/img/sys.png" size="40" v-if="current == 0 && !item.qr" @tap.stop="onClickItem(item, index)"></u-icon>
						<view class="order-status" v-if="current == 1">团长已收衣</view>
					</view>
					<view class="order-item-info" @tap.stop="userCanNav(item, index)">
						<view class="cart-item-title">用户昵称:{{ item.userName }}</view>
						<view class="cart-item-title">订单编号:{{ item.orderNum }}</view>
						<view class="cart-item-title">下单时间:{{ item.createDate }}</view>

						<view class="row between">
							<view class="">
								<text class="cart-fee">
									订单金额:
									<text class="cart-money">{{ item.sum }}</text>
								</text>
							</view>
							<view class="row" v-if="current == 1">
								<view class="order-btn" :class="[item.checked ? 'active' : 'one']" hover-class="hover-opacity" @tap.stop="leaderOptions(item, index)">选择</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="footer-btn column" v-if="current == 1"><view class="f-btn" hover-class="hover-opacity" @tap.stop="leaderPack(1)">签收</view></view>
		</view>

		<mix-loading v-if="isLoading"></mix-loading>
		<u-back-top icon="/static/img/back-top.png" :scrollTop="scrollTop" duration="300"></u-back-top>
	</view>
</template>

<script>
export default {
	data() {
		return {
			height: uni.getSystemInfoSync().statusBarHeight,
			top: uni.getSystemInfoSync().statusBarHeight + 154,
			background: 'linear-gradient(128deg, #4E9FC1, #2781A7,.1)',
			activeStyle: {
				color: '#000000'
			},
			fixed: false,
			list: [
				{
					name: '待收衣'
				},
				{
					name: '待送衣'
				}
			],
			current: 0,
			opacity: 1,
			scrollTop: 1200,
			dataList: [],
			pageNo: 1,
			totalPage: 1,
			commission:""
		};
	},
	onLoad(options) {
		this.commission = options.commission;
		this.loadData();
		uni.$on('receive', id => {
			console.log(id);
			this.delItemdata(id);
		});
	},
	onReachBottom() {
		this.totalPage > this.pageNo ? (this.pageNo++, this.loadData()) : '';
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
		if (e.scrollTop) {
			this.background = `linear-gradient(128deg, #4E9FC1, #2781A7)`;
		} else {
			this.background = 'linear-gradient(128deg, #4E9FC1, #2781A7,.1)';
		}
		if (e.scrollTop > 100) {
			this.fixed = true;
		} else {
			this.fixed = false;
		}
	},
	methods: {
		delItemdata(id) {
			for (let i = 0; i <= this.dataList.length - 1; i++) {
				let item = this.dataList[i];
				if ((item.id = id)) {
					this.dataList.splice(i, 1);
					break;
				}
			}
		},
		initData() {
			this.pageNo = 1;
			this.totalPage = 1;
			this.loadData();
		},
		async leaderPack() {
			let array = this.dataList.filter(item => {
				return item.checked;
			});
			if (array && array.length != 0) {
				const ids = array.map(item => {
					return item.id;
				});
				console.log(ids);
				const data = {
					ids: ids.join(',')
				};
				const res = await this.$request('tz/send', data, { showLoading: true });
				if (res.result == 0) {
					this.$util.msg('订单签收成功!');
					this.initData();
				} else {
					this.$util.msg(res.resultNote);
				}
			}else{
				this.$util.msg('请选择要签收的衣物!')
			}
		},
		userCanNav(v, k) {
			if (this.current == 0 && !v.qr) {
				this.$util.msg('请先扫码绑定订单信息!');
				return;
			}
			this.navTo(`/pages/leader/orderdetails?id=${v.id}&type=${this.current}`);
		},
		leaderOptions(v, k) {
			console.log(v);
			// if (this.current == 0 && !v.qr) {
			// 	this.$util.msg('请先扫码绑定订单信息!');
			// 	return;
			// }
			v.checked =!v.checked;
			this.$forceUpdate();
		},
		onClickItem(v, k) {
			uni.scanCode({
				success: options => {
					if (options.errMsg == 'scanCode:ok') {
						console.log(options.result);
						this.bindItemScanCode(v, k, options.result);
					}
				}
			});
		},
		async bindItemScanCode(item, index, scanCode) {
			const data = {
				id: item.id,
				qr: scanCode
			};
			const res = await this.$request('tz/scan-qr', data);
			if (res.result == 0) {
				this.$set(this.dataList[index], 'qr', scanCode);
				this.$util.msg('二级码与订单信息绑定成功!');
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async change(index) {
			this.current = index;
			await uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
			this.initData();
		},
		pullDown(pullScroll) {
			setTimeout(() => {
				this.loadData(pullScroll);
			}, 200);
		},
		async loadData() {
			let url = this.current == 0 ? 'tz/collect-list' : 'tz/send-list';
			const data = {
				uid: uni.getStorageSync('uid'),
				pageNo: this.pageNo,
				pageSize: '10'
			};
			const res = await this.$request(url, data, { showLoading: true });
			if (this.pageNo == 1) this.dataList = [];
			if (res.result == 0) {
				this.dataList = this.dataList.concat(res.data.list);
				this.totalPage = Math.ceil(res.data.count / 10);
			} else {
				this.$util.msg(res.resultNote);
			}
		}
	}
};
</script>

<style scoped lang="scss">
.sticky {
	position: fixed;
	width: 100%;
	z-index: 999;
	border-bottom: 1px solid #f6f6f6;
}
.back-top {
	position: fixed;
	top: 0;
	z-index: 99999;
	left: 0;
	width: 100%;
}
.back-icon-con {
	height: 44px;
	padding-left: 24upx;
	position: relative;
}
.back-top-title {
	height: 44px;
	line-height: 44px;
	// margin-right: 94px;
	width: 250rpx;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	font-size: 32upx;
	color: #fff;
}
.top-img {
	width: 100%;
}
.l-top-i {
	position: absolute;
	padding: 30upx 20upx;
	bottom: 0;
	width: 100%;
}
.l-top-t {
	font-size: 24upx;
	color: #c9efff;
}
.l-top-m {
	font-size: 50upx;
	font-weight: bold;
	color: #ffffff;
	padding: 14upx 0;
}
.btn {
	position: absolute;
	right: 0;
	top: 30upx;
	width: 133upx;
	line-height: 50upx;
	text-align: center;
	color: #ffffff;
	font-size: 22upx;
	background: #53a4c6;
	border-radius: 25upx 0px 0px 25upx;
}

.order-con {
	background: #ffffff;
	border-radius: 20upx;
	width: 94%;
	margin: 20upx auto;
	margin-bottom: 20upx;
	padding: 20upx;
	box-shadow: 0px 0px 30px 0px rgba(191, 191, 191, 0.27);
	position: relative;
}
.order-top {
	line-height: 70upx;
	padding-bottom: 20upx;
}
.s-con {
	font-size: 32upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #000000;
}
.order-status {
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #2781a7;
}
.order-item-info {
	padding: 20upx 0;
	position: relative;
}
.cart-item-img {
	width: 62upx;
	height: 62upx;
	border-radius: 10upx;
	margin-right: 20rpx;
	position: relative;
}
.img {
	width: 62upx;
	height: 62upx;
}
.cart-item-title {
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 47upx;
}
.cart-item-price {
	font-size: 30upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #cb1414;
	line-height: 36upx;
}
.cart-fee {
	font-size: 27upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #fe2525;
}
.cart-money {
	color: #fe2525;
	font-size: 30upx;
	position: relative;
}
.cart-money::before {
	content: '￥';
	font-size: 20upx;
}
.order-btn {
	padding: 10upx 50upx;
	text-align: center;
	border-radius: 36upx;
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	position: absolute;
	right: 0;
	bottom: 20upx;
}
.active {
	color: #ffffff;
	background: linear-gradient(128deg, #4e9fc1, #2781a7);
	// margin-right: 40upx;
}
.one {
	color: #666666;
	border: 1px solid #e7e7e7;
}
.footer-btn {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 120upx;
	background: #ffffff;
	z-index: 99;
}
.f-btn {
	width: 700upx;
	height: 88upx;
	text-align: center;
	line-height: 88upx;
	background: #6aae59;
	border-radius: 44upx;
	font-size: 30upx;
	color: #f6f1ff;
}
</style>
